<template>
	<view class="orderback">
		<!-- 订单信息 -->
		<view class="orderinfo" v-if="needReturnOrder">
			<view class="top">
				<view class="orderId">订单编号: {{ orderInfo.orderSn }}</view>
			</view>
			<view class="middle">
				<view class="product">
					<image :src="needReturnOrder.productPic" mode=""></image>
					<view class="info">
						<view class="p1">
							<view class="name">{{ needReturnOrder.productName }}</view>
							<view class="price">￥{{ needReturnOrder.productPrice || 0 }}</view>
						</view>
						<view class="p2">
							<view class="productSkuId">编号: {{ needReturnOrder.productSkuId }}</view>
							<view class="num">x{{ needReturnOrder.productQuantity }}</view>
						</view>
						<view class="sku">
							<text>规格:</text>
							<text class="sku-item" v-for="(skuItem, index) in JSON.parse(needReturnOrder.productAttr)" :key="index">{{ skuItem.key }}: {{ skuItem.value }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="time-total">
					<view class="total">合计: ￥{{ needReturnOrder.totalPrice }}</view>
				</view>
			</view>
		</view>
		<!-- 退单信息 -->
		<view class="card">
			<view class="row">
				<view class="label">请选择退单数量:</view>
				<view class="value" v-if="needReturnOrder">{{ needReturnOrder.productQuantity }}</view>
			</view>
			<view class="row">
				<view class="label">请输入退货原因:</view>
				<input type="text" v-model="reason" placeholder="请输入退货原因" />
			</view>
			<view class="row">
				<view class="label">请选择退货地址:</view>
				<view class="value">
					<picker mode="selector" :range="companyAddrss" range-key="addressName" :value="selectedCompanyIndex" @change="handlePickChange">
						{{ selCompanyAddrss.addressName }}
					</picker>
				</view>
			</view>
			<view class="row">
				<view class="label">请输入问题描述:</view>
				<view class="value"><textarea placeholder="请输入问题描述" v-model="description"></textarea></view>
			</view>
			<view class="upload">
				<view class="head">
					<view class="title">温馨提醒:</view>
					<view class="tips">上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张</view>
				</view>
				<view class="content">
					<view class="upload-btn" @tap="handleChooseImage">
						<view>
							<image src="../../../static/icons/add.png" mode=""></image>
							<view class="">上传图片</view>
						</view>
					</view>
					<view class="image-list" v-if="imageList.length">
						<view class="image-item" v-for="(item, index) in imageList" :key="index">
							<image :src="item" mode=""></image>
							<image src="../../../static/icons/shanchus2.png" mode="" class="deleteImage" @tap="handleDeleteImage(index)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="submit" @tap="handleSubmit">提交</view>
	</view>
</template>

<script>
import { getPreOrderById } from '../../../api/order/confirmorder/index.js';
import { getCompanyAddrss, addOrderReturnApply } from '../../../api/order/orderback/index.js';
import baseurl from '../../../api/config.js';
export default {
	data() {
		return {
			orderId: '', // 订单id
			skuid: '', // 要删除商品的skuid
			orderInfo: {}, // 订单信息
			orderItems: [], // 订单商品
			reason: '', // 退货原因
			description: '', // 问题描述
			companyAddrss: [], // 退货公司地址
			selectedCompanyIndex: -1, // 选择的退货公司的下标
			imageList: [] // 要上传的图片本地地址
		};
	},
	computed: {
		// 被选中的退货公司地址
		selCompanyAddrss() {
			return this.companyAddrss[this.selectedCompanyIndex] || { addressName: '请选择退货地址' };
		},
		// 需要退货的商品
		needReturnOrder() {
			return this.orderItems.find(item => item.productSkuId == this.skuid);
		}
	},
	methods: {
		// 获取订单信息
		async getOrderInfo() {
			const { success, data } = await getPreOrderById(this.orderId);
			if (success) {
				this.orderInfo = data.orderBase;
				this.orderItems = data.orderItems;
			} else {
				uni.showToast({
					title: '获取订单信息失败',
					icon: 'error'
				});
			}
		},
		// 获取退货公司地址
		async getCompanyAddrssList() {
			const { success, data } = await getCompanyAddrss();
			if (success) {
				this.companyAddrss = data.items;
			}
		},
		// 退货公司地址变更
		handlePickChange(e) {
			this.selectedCompanyIndex = e.detail.value;
		},
		// 选择图片
		handleChooseImage() {
			uni.chooseImage({
				success: res => {
					console.log(res);
					if (this.imageList.length + res.tempFilePaths.length > 3) {
						uni.showToast({
							title: '一次上传最多不超过3张!',
							icon: 'none'
						});
						return;
					}
					let isNotExceed = res.tempFiles.every(el => el.size <= 1024 * 1024);
					if (!isNotExceed) {
						uni.showToast({
							title: '文件过大,请重新选择',
							icon: 'none'
						});
						return;
					}
					this.imageList.push(...res.tempFilePaths);
				}
			});
		},
		// 删除选择的图片
		handleDeleteImage(index) {
			this.imageList.splice(index, 1);
		},
		// 提交
		handleSubmit() {
			// 先上传所有选择的图片
			Promise.all(this.uploadImages()).then(async res => {
				// 得到图片地址字符串
				const proofPics = res
					.map(item => {
						return JSON.parse(item).data.fileUrl;
					})
					.join(',');
				const { success, message } = await addOrderReturnApply({
					companyAddressId: this.selCompanyAddrss.id,
					count: this.needReturnOrder.productQuantity,
					description: this.description,
					orderId: this.orderId,
					orderItemId: this.needReturnOrder.id,
					proofPics,
					reason: this.reason
				});
				if (success) {
					uni.showToast({
						title: '退货成功!',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: message,
						icon: 'none'
					});
				}
			});
		},
		// 依次上传选择的图片
		uploadImages() {
			return this.imageList.map(item => {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseurl + '/lejuClient/orderReturn/uploadImg',
						filePath: item,
						file: 'file',
						success: res => {
							resolve(res.data);
						},
						fail: err => {
							reject(err);
						}
					});
				});
			});
		}
	},
	onLoad(options) {
		this.orderId = options.id;
		this.skuid = options.skuid;
		this.getOrderInfo();
		this.getCompanyAddrssList();
	}
};
</script>

<style lang="scss" scoped>
.orderback {
	padding: 30rpx;
	.orderinfo {
		box-sizing: border-box;
		padding: 36rpx;
		border-radius: 24rpx;
		background-color: #fff;
		margin: 30rpx 0;
		font-size: 24rpx;
		color: #3e3e3e;
		.top {
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f1ece7;
		}
		// 商品列表
		.middle {
			.product {
				display: flex;
				border-bottom: 2rpx solid #f1ece7;
				padding: 30rpx 0;
				image {
					width: 162rpx;
					height: 162rpx;
				}
				.info {
					flex: 1;
					margin-left: 30rpx;
					.p1 {
						display: flex;
						justify-content: space-between;
						color: #3e3e3e;
						font-size: 26rpx;
						.name {
							width: 80%;
						}
					}
					.p2 {
						display: flex;
						justify-content: space-between;
						margin-top: 40rpx;
						color: #8d8d8d;
						font-size: 22rpx;
					}
					.sku {
						color: #8d8d8d;
						font-size: 22rpx;
						margin-top: 10rpx;
						.sku-item {
							margin-left: 10rpx;
						}
					}
					.p4 {
						display: flex;
						justify-content: flex-end;
						.btn {
							text-decoration: underline;
						}
					}
				}
			}
		}
		// item 底部合计&按钮
		.bottom {
			margin-top: 30rpx;
			.time-total {
				display: flex;
				justify-content: flex-end;
			}
			.btns {
				display: flex;
				justify-content: flex-end;
				margin-top: 30rpx;
				.btn {
					width: 124rpx;
					height: 50rpx;
					border: 2rpx solid #2d4f43;
					font-size: 26rpx;
					border-radius: 10rpx;
					color: #2d4f43;
					text-align: center;
					line-height: 50rpx;
					margin-left: 32rpx;
					padding: 0 10rpx;
					&.delete {
						width: auto;
						border: 2rpx solid red;
					}
				}
			}
		}
	}
	.card {
		background-color: #fff;
		margin-top: 30rpx;
		font-size: 24rpx;
		.row {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 2rpx solid #f1ece7;
			.label {
				width: 50%;
			}
			.value {
				width: 50%;
				text-align: right;
			}
			input,
			textarea {
				font-size: 24rpx;
				text-align: right;
			}

			textarea {
				width: 100%;
			}
		}
		// 上传图片
		.upload {
			padding: 30rpx;
			.head {
				padding: 30rpx 0;
			}
			.content {
				display: flex;
				.image-list {
					display: flex;
					.image-item {
						position: relative;
						margin: 0 10rpx;
						.deleteImage {
							width: 34rpx;
							height: 34rpx;
							position: absolute;
							top: -10rpx;
							right: -10rpx;
						}
						image {
							width: 120rpx;
							height: 120rpx;
						}
					}
				}
			}
			.upload-btn {
				width: 120rpx;
				height: 120rpx;
				font-size: 12rpx;
				color: #666;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				image {
					width: 58rpx;
					height: 58rpx;
				}
			}
		}
	}
	.submit {
		margin: 120rpx auto;
		width: 536rpx;
		height: 94rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 94rpx;
		background: #354e44;
		color: #fff;
		border-radius: 28rpx;
	}
}
</style>
